<template>
	<z-paging ref="paging" v-model="command" @query="queryList" show-refresher-update-time>
		<template #top>
			<view class="w-100 z-index-10 pb-1"
				:style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
				<view class="d-flex d-flex-middle d-flex-between px-3"
					:style="{'height': $store.state.titleBarHeight + 'px'}">
					<view class="d-flex d-flex-middle">
						<view class="mr-4 d-flex d-flex-column d-flex-middle d-flex-center" @click="changType(1)">
							<text :class="ctype == 1?'focus-txt':'color71'">{{$store.state.isSquare?'推荐':'热门'}}</text>
							<view class="liner" :class="{ 'lon': ctype == 1}"></view>
						</view>
						<view class="mr-4 d-flex d-flex-column d-flex-middle d-flex-center" @click="changType(0)">
							<text :class="ctype == 0?'focus-txt':'color71'">关注</text>
							<view class="liner" :class="{ 'lon': ctype == 0}"></view>
						</view>
					</view>
				</view>
				<view class="camera" @click="toPostUpdates" :style="{'display': display}">
					<image class="center"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87.png"
						mode="heightFix" style="height:30px"></image>
				</view>
			</view>
			<view class="mx-3 rounded20 py-2 mb-1 px-3 d-flex d-flex-middle d-flex-between" style="background: #defafd;" v-if="firstTips">
				<view class="d-flex d-flex-column d-flex-center">
					<view class="">小嗒-年轻人的搭子社交</view>
					<view class="font22" style="color: #75868d;">倡导兴趣交友，提供纯净的找搭子平台</view>
				</view>
				<view class="font28" style="color: #60c9c4;" @click="GoCheckIt">去查看</view>
			</view>
		</template>

		<template #empty>
			<view class="w-100">
				<view v-if="ctype == 1">
					<text class="position-relative font-bold font30 d-flex"
						style="justify-content: center;align-items: center;top: 405rpx;">暂时还没有发布博客</text>
					<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
				</view>

				<view v-else>
					<text class="position-relative font-bold font30 d-flex"
						style="  justify-content: center;align-items: center;top: 405rpx;">暂时还没有数据哦~</text>
					<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
				</view>
			</view>
		</template>

		<!-- 数据列表 -->
		<!-- 关注 -->
		<view class="px-1 mt-3 pb-3" v-if="ctype == 0">
			<!-- <view  class="bg-fff rounded30 px-2 py-3" style="min-height: 100vh;"> -->
			<view v-if="command && command.length > 0">
				<view class="mb-4" v-for="(i, index) in command" :key="i.id" @click="liulan(i.id,i)">
					<view class="d-flex d-flex-middle d-flex-between mb-1">
						<view class="d-flex d-flex-middle" @click.stop="user(i.uid)">
							<view class="position-relative img-bg d-flex d-flex-center d-flex-middle mr-1">
								<image v-bind:src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
								<image v-if="i.dressedVoMap && i.dressedVoMap['1']" class="avatar-frame" :src="i.dressedVoMap['1'].icon"></image>
							</view>
							<view>
								<view class="d-flex">
									<view class="font30 d-flex">
										<view class="m-1">
											{{i.nickName}}
										</view>
										<view class="sex ml-1 " style="width: 30rpx; height: 30rpx; margin-top: 5rpx;">
											<image v-if="i.gender === 1"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"
												style="width: 100%; height: 100%;"></image>
											<image v-if="i.gender === 2"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"
												style="width: 100%; height: 100%;"></image>
										</view>
										<view class="d-flex-btn ml-1 " style="">
											<image v-if="i.accountType==2"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip-y.png"
												style="width: 88rpx;height: 32rpx;"></image>
											<image v-if="i.accountType==3"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%207%402x.png"
												style="width: 88rpx;height: 32rpx;"></image>
										</view>
									</view>
								</view>
								<view class="ml-1 font24 color71">{{i.time}}
									{{i.ipProvince? '· ' + i.ipProvince.slice(0, 2) : '· 未知'}}</view>
							</view>
						</view>
						<view class="d-flex d-flex-middle">
							<view class="bg-main py-1 px-2 font26 colorfff rounded30 mr-2" @click.stop="toim(i)">私聊
							</view>
							<view class="position-relative z-index-10">
								<text class="iconfont icon-gengduo" style="font-size: 37rpx;"
									@click.stop="openMorePopup(i)"></text>
								<view v-show="circleShow == (i.id)"
									class="position-absolute d-flex-column d-flex-center d-flex-middle rounded30 py-3 "
									style="width: 150rpx; background: rgba(255, 255, 255, 1); top: 48rpx; left: -120rpx;">
									<view class="d-flex d-flex-middle" @click.stop="collect(i)">
										<image v-if="i.collectFlag"
											src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%B6%E8%97%8F.png"
											style="height: 40rpx; height: 40rpx;"></image>
										<image v-else="i.collectFlag"
											src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241209161617.png"
											mode="heightFix" style="height: 40rpx;"></image>
										<text class="font32">收藏</text>
									</view>
									<view class="d-flex mt-2" @click.stop="gotoReportPage">
										<image
											src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%B8%BE%E6%8A%A5.png"
											style="height: 40rpx; width: 40rpx;"></image>
										<text class="font32">举报</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="pb-2" style="padding-left: 120rpx;">
						<view class="font26 mb-2">
							<view class="mb-1">{{i.remark}}</view>
							<view class="topic-list" v-if="i.topicNames">
								<view v-for="(topic, index) in i.topicNames.split(',')" :key="index" class="">
									<view class="topic-content px-2 mr-1" @click.stop="toTags(topic)">
										<text class="topic-hash">#</text>
										<text class="topic-name">{{topic}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class=" mb-2 d-flex d-flex-column">
							<view class="d-flex  d-flex-middle">
								<image v-if="i.screenshot1" :src="i.screenshot1" @load="ImgSize($event, index)"
									@click.stop="previwImage(index,0)" :class="[
										'rounded15',
										{
											'singlePic': !i.screenshot2 && !i.screenshot3,
											'MorePic': i.screenshot2 && !i.screenshot3,
											'threePic': i.screenshot2 && i.screenshot3
										}
									]" :mode="!i.screenshot2 ? 'aspectFill' : 'aspectFill'"
									:style="[{maxWidth: i.isLongChart && i.screenshot2 ? '420rpx' : '550rpx'}]"></image>
								<image
									:class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']"
									v-if="i.screenshot2" :src="i.screenshot2" mode="aspectFill"
									@click.stop="previwImage(index,1)"></image>
								<image :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']"
									v-if="i.screenshot3" :src="i.screenshot3" mode="aspectFill"
									@click.stop="previwImage(index,2)"></image>
							</view>
						</view>

						<view class="d-flex d-flex-middle pr-3 d-flex-between">
							<image class="ml-1"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png"
								mode="widthFix" style="width: 26rpx; height: 26rpx;" @click.stop="share(i)"></image>
							<view class="d-flex d-flex-middle" @click.stop="dianzan(i.id,1)">
								<image v-if="i.favorFlag"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png"
									style="width: 35rpx; height: 35rpx;"></image>
								<text v-else class="iconfont icon-aixin1 color6d"></text>
								<text class="color71 font26 ml-1">{{i.favorCount}}</text>
							</view>
							<view class="d-flex d-flex-middle">
								<text class="iconfont icon-pinglun color6d"></text>
								<text class="color71 font26 ml-1">{{(i.totalCommentCount&&i.totalCommentCount!=0)? i.totalCommentCount : ''}}评论</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 推荐 -->
		<view class="px-1 mt-2 pb-3" v-if="ctype == 1">
			<view class="bg-fff rounded30 px-2 py-3">
				<view class="d-flex d-flex-wrap mb-2">
					<view class="d-flex d-flex-middle mb-3" style="width: 345rpx;"
						v-for="(tag, index) in Tags.slice(0, 4)" :key="index" @click="toTags(tag)">
						<view class="huati px-1 py d-flex d-flex-middle d-flex-center rounded20 mr-2">
							<text class="font20 colorfff">话题</text>
						</view>
						<text class="color71">{{ tag }}</text>
					</view>
				</view>

				<view class="d-flex d-flex-middle mb-5">
					<scroll-view class="navbar-scroll" scroll-x="true" show-scrollbar="false">
						<view class="navbar-container">
							<!-- 全部按钮 -->
							<view class="tab-item" :class="type == 0 ? 'active-tab' : ''">
								<text :class="type == 0 ? 'colorfff' : 'color71'" class="font-bold" @click="chang(0)">全部</text>
							</view>

							<!-- 其他分类按钮 -->
							<view class="tab-item" v-for="(item,index) in category" :key="index"
								:class="type == item.id ? 'active-tab' : ''">
								<text :class="type == item.id ? 'colorfff' : 'color71'" class="font-bold"
									@click="chang(item.id)">{{item.name}}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="mb-4" v-if="type == 0&&command" v-for="(i, index) in command" :key="i.id"
					@click="liulan(i.id,i)">
					<view class="d-flex d-flex-middle d-flex-between mb-1" style="flex: 1">
						<view class="d-flex d-flex-middle" @click.stop="user(i.uid)">
							<view class="position-relative img-bg d-flex d-flex-center d-flex-middle mr-1">
								<image v-bind:src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
								<image v-if="i.dressedVoMap && i.dressedVoMap['1']" class="avatar-frame" :src="i.dressedVoMap['1'].icon"></image>
							</view>
							<view>
								<view class="d-flex" style="align-items: center; ">
									<view class="font30 d-flex">
										<view class="m-1">
											{{i.nickName}}
										</view>
										<view class="sex ml-1 " style="width: 30rpx; height: 30rpx; margin-top: 5rpx;">
											<image v-if="i.gender === 1"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"
												style="width: 100%; height: 100%;"></image>
											<image v-if="i.gender === 2"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"
												style="width: 100%; height: 100%;"></image>
										</view>
										<view class="d-flex-btn ml-1" style="">
											<image v-if="i.accountType==2"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip-y.png"
												style="width: 88rpx;height: 32rpx;"></image>
											<image v-if="i.accountType==3"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%207%402x.png"
												style="width: 88rpx;height: 32rpx;"></image>
										</view>
									</view>
								</view>

								<view class="ml-1 font24 color71">
									{{i.time}} {{i.ipProvince? '· ' + i.ipProvince.slice(0, 2) : '· 未知'}}
								</view>
							</view>

						</view>
						<view class="d-flex d-flex-middle">
							<view v-if="i.uid == $store.state.user.uid"></view>
							<view v-else class="py-1 px-2 rounded30 "
								:class="{'bg-main': !i.concernFlag, 'bg-grey': i.concernFlag, 'colorfff': !i.concernFlag, 'color-grey': i.concernFlag,'font24':i.concernFlag,'font26':!i.concernFlag}"
								@click.stop="i.concernFlag ? null : concernUser(i.uid)">{{i.concernFlag?"已关注":"关注"}}
							</view>

							<view class="position-relative z-index-10">
								<text class="iconfont icon-gengduo" style="font-size: 37rpx;" @click.stop="openMorePopup(i)"></text>
							</view>
						</view>
					</view>
					<view class="pb-2 d-flex d-flex-column" style="padding-left: 120rpx;">
						<view class="font26 mb-2">
							<view class="mb-1">{{i.remark}}</view>
							<view class="topic-list" v-if="i.topicNames">
								<view v-for="(topic, index) in i.topicNames.split(',')" :key="index" class="">
									<view class="topic-content px-2 mr-1" @click.stop="toTags(topic)">
										<text class="topic-hash">#</text>
										<text class="topic-name">{{topic}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class=" mb-2 d-flex d-flex-column">
							<view class="d-flex  d-flex-middle mb-2" v-if="i.screenshot1">
								<image v-if="i.screenshot1" :src="i.screenshot1" @load="ImgSize($event, index)"
									@click.stop="previwImage(index,0)" :class="[
											'rounded15',
											{
												'singlePic': !i.screenshot2 && !i.screenshot3,
												'MorePic': i.screenshot2 && !i.screenshot3,
												'threePic': i.screenshot2 && i.screenshot3
											}
										]" :mode="!i.screenshot2 ? 'aspectFill' : 'aspectFill'"
									:style="[{maxWidth: i.isLongChart && i.screenshot2 ? '420rpx' : '550rpx'}]"></image>
								<image
									:class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']"
									v-if="i.screenshot2" :src="i.screenshot2" mode="aspectFill"
									@click.stop="previwImage(index,1)"></image>
								<image :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']"
									v-if="i.screenshot3" :src="i.screenshot3" mode="aspectFill"
									@click.stop="previwImage(index,2)"></image>
							</view>
							<!-- <view class="aixin rounded30 px-1 py-1 d-flex d-flex-middle" @click.stop="gotoPromotion(i)">
								<text class="iconfont icon-aixin_shixin mr" style="color: #FF6C00;"></text>
								<text class="font24">上热门</text>
							</view> -->
						</view>


						<view class="d-flex d-flex-middle pr-3 d-flex-between">
							<image class="ml-1"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png"
								@click.stop="share(i)" mode="widthFix" style="width: 26rpx; height: 26rpx;"></image>
							<view class="d-flex d-flex-middle" @click.stop="dianzan(i.id,2)">
								<image v-if="i.favorFlag"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png"
									style="width: 35rpx; height: 35rpx;"></image>
								<text v-else class="iconfont icon-aixin1 color6d"></text>
								<text class="color71 font26 ml-1">{{i.favorCount}}</text>
							</view>
							<view class="d-flex d-flex-middle" @click.stop="gotoDetail(i)">
								<text class="iconfont icon-pinglun color6d"></text>
								<text class="color71 font26 ml-1">{{(i.totalCommentCount&&i.totalCommentCount!=0)? i.totalCommentCount : ''}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="mb-4" v-if="categoryid==type&&type !== 0" v-for="(i, index) in command" :key="i.id">
					<view class="d-flex d-flex-middle d-flex-between mb-1" @click="liulan(i.id,i)">
						<view class="d-flex d-flex-middle position-relative" @click.stop="user(i.uid)">
							<view class="position-relative img-bg d-flex d-flex-center d-flex-middle mr-1">
								<image v-bind:src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
								<image v-if="i.dressedVoMap && i.dressedVoMap['1']" class="avatar-frame" :src="i.dressedVoMap['1'].icon"></image>
							</view>
							<view>
								<view class="d-flex">
									<view class="font30 d-flex">
										<view class="m-1">
											{{i.nickName}}
										</view>
										<view class="sex ml-1 " style="width: 30rpx; height: 30rpx; margin-top: 5rpx;">
											<image 
												v-if="i.gender === 1"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"
												style="width: 100%; height: 100%;"
											></image>
											<image 
												v-if="i.gender === 2"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"
												style="width: 100%; height: 100%;"
											></image>
										</view>
										<view class="d-flex-btn ml-1 " style="">
											<image 
												v-if="i.accountType==2"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip-y.png"
												style="width: 88rpx;height: 32rpx;"
											></image>
											<image 
												v-if="i.accountType==3"
												src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%207%402x.png"
												style="width: 88rpx;height: 32rpx;"
											></image>
										</view>

									</view>
								</view>
								<view class="ml-1 font24 color71">{{i.time}}
									{{i.ipProvince? '· ' + i.ipProvince.slice(0, 2) : '· 未知'}}</view>
							</view>
						</view>
						<view class="d-flex d-flex-middle">
							<view v-if="i.uid == $store.state.user.uid"></view>
							<view v-else class="py-1 px-2 rounded30 "
								:class="{'bg-main': !i.concernFlag, 'bg-grey': i.concernFlag, 'colorfff': !i.concernFlag, 'color-grey': i.concernFlag,'font24':i.concernFlag,'font26':!i.concernFlag}"
								@click.stop="i.concernFlag ? null : concernUser(i.uid)">{{i.concernFlag?"已关注":"关注"}}
							</view>
							<view class="position-relative z-index-10">
								<text class="iconfont icon-gengduo" style="font-size: 37rpx;" @click.stop="openMorePopup(i)"></text>
							</view>
						</view>
					</view>

					<view class="pb-2 d-flex d-flex-column" style="padding-left: 120rpx;" @click="liulan(i.id,i)">
						<view class="font26 mb-2">
							<view class="mb-1">{{i.remark}}</view>
							<view class="topic-list" v-if="i.topicIds">
								<view v-for="(topic, index) in i.topicNames.split(',')" :key="index" class="">
									<view class="topic-content px-2 mr-1" @click="toTags(topic)">
										<text class="topic-hash">#</text>
										<text class="topic-name">{{topic}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class=" mb-2 d-flex d-flex-column">
							<view class="d-flex d-flex-middle mb-2" v-if="i.screenshot1">
								<image v-if="i.screenshot1" :src="i.screenshot1" @load="ImgSize($event, index)"
									@click.stop="previwImage(index,0)" :class="[
											'rounded15',
											{
												'singlePic': !i.screenshot2 && !i.screenshot3,
												'MorePic': i.screenshot2 && !i.screenshot3,
												'threePic': i.screenshot2 && i.screenshot3
											}
										]" :mode="!i.screenshot2 ? 'aspectFill' : 'aspectFill'"
									:style="[{maxWidth: i.isLongChart && i.screenshot2 ? '420rpx' : '550rpx'}]"></image>
								<image
									:class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']"
									v-if="i.screenshot2" :src="i.screenshot2" mode="aspectFill"
									@click.stop="previwImage(index,1)"></image>
								<image :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']"
									v-if="i.screenshot3" :src="i.screenshot3" mode="aspectFill"
									@click.stop="previwImage(index,2)"></image>

							</view>
							<!-- <view class="aixin rounded30 px-1 py-1 d-flex d-flex-middle" @click.stop="gotoPromotion(i)">
								<text class="iconfont icon-aixin_shixin mr" style="color: #FF6C00;"></text>
								<text class="font24">上热门</text>
							</view> -->
						</view>

						<view class="d-flex d-flex-middle pr-3 d-flex-between">
							<image class="ml-1"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png"
								@click.stop="share(i)" mode="widthFix" style="width: 26rpx; height: 26rpx;"></image>
							<view class="d-flex d-flex-middle" @click.stop="dianzan(i.id,2)">
								<image v-if="i.favorFlag"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png"
									style="width: 35rpx; height: 35rpx;"></image>
								<text v-else class="iconfont icon-aixin1 color6d"></text>
								<text class="color71 font26 ml-1">{{i.favorCount}}</text>
							</view>
							<view class="d-flex d-flex-middle" @click.stop="gotoDetail(i)">
								<text class="iconfont icon-pinglun color6d"></text>
								<text class="color71 font26 ml-1">{{(i.totalCommentCount&&i.totalCommentCount!=0)? i.totalCommentCount : ''}}评论</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>


		<uni-popup @maskClick="changedisplay" @change="changestatus" ref="share" type="share" safeArea
			backgroundColor="#fff" position: fixed border-radius="8px 8px 0 0" z-index="10">
			<view class="my-4 text-center">分享到</view>
			<view class="d-flex d-flex-between px-5 mb-4 bot">
				<view class="d-flex-column d-flex-middle" @click="OnShare(1)">
					<image class="rounded"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1.png"
						style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">微信</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(2)">
					<image class="rounded"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%9C%8B%E5%8F%8B%E5%9C%88.png"
						style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">朋友圈</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(3)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/QQ.png"
						style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">QQ好友</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(4)">
					<image class="rounded"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/qq%E7%A9%BA%E9%97%B4.png"
						style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">QQ空间</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(5)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png"
						style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">小嗒好友</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup @maskClick="changedisplay" @change="changestatus" type="bottom" ref="morePopup"
			background-color="#fff" border-radius="16px 16px 0 0 " style="z-index: 10;">
			<view class="popup-content pt-4" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="d-flex d-flex-middle ml-3 mt-2" @click="collect(i)">
					<image v-if="morePopupData.collectFlag"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%B6%E8%97%8F.png"
						mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
					<image v-else
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241209161617.png"
						mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
					<text v-if="!morePopupData.collectFlag" class="font32 ml-2">收藏</text>
					<text v-else class="font32 ml-2">取消收藏</text>
				</view>
				<view class="d-flex mt-2 ml-2 d-flex-middle ml-3 mb-4 mt-4" @click="gotoReportPage(morePopupData.id)">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%B8%BE%E6%8A%A5.png"
						mode="heightFix" style="height: 35rpx; width: 35rpx;"></image>
					<text class="font32 ml-2">举报</text>
				</view>
			</view>
		</uni-popup>
	</z-paging>
</template>

<script>
	import store from '@/store/index.js';
	let token = uni.getStorageSync(USER_TOKEN);
	import { blogApi } from '@/http/blogApi.js';
	import { userApi } from '@/http/userApi.js';
	import { TaskApi } from '../../http/taskApi';
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	import loginVue from '../../pagesMain/login/login.vue';
	export default {
		data() {
			return {
				Tags: [],
				morePopupData: {
					collectFlag: 0
				},
				cardLoading: true,
				concern: [], //关注的博客
				clickCounts: {}, // 用于存储每个ID的点击次数
				bgcolor: 'transparent',
				ctype: 1,
				firstTips: null,
				circleShow: 0,
				isLastPage: false, // 是否是最后一页
				command: [], //推荐 的博客数据
				params: {
					pageIndex: 1, //当前页码
					pageSize: 3, //每页条目
				},
				shareData: {
					href: "https://www.168802.xyz",
					title: "小嗒组队分享",
					summary: null,
					imageUrl: null
				},
				imgs: [],
				shoucangparam: { //收藏的参数
					blogId: '',
					flag: true,
					type: 2
				},
				concernParam: { //关注
					bindFlag: true,
					fromUid: '',
					toUid: '',
					type: 2
				},
				display: 'flex',
				concernBlogparam: { //关注的博客
					pageIndex: 1,
					pageSize: 5,

				},
				concernisLastPage: false,
				uid: [],
				type: 0,
				topicId: null,
				category: [], //分类数据
				categoryid: 0
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#ffffff'
			} else {
				this.bgcolor = 'transparent'
			}
		},
		onShow() {
			let str = uni.getStorageSync('firstTips');
			if(str == 'ShowTips') {
				this.firstTips = true
			} else {
				this.firstTips = false
			}
		},
		methods: {
			async queryList(pageNo, pageSize) {
				this.type = 0
				if (this.ctype == 1) {
					const res = await blogApi.queryBlogRecommend({
						pageIndex: pageNo,
						pageSize: pageSize,
					});
					this.$refs.paging.complete(res.records);
				}
				if (this.ctype == 0) {
					let res = await blogApi.queryBlogConcernList({
						pageIndex: pageNo,
						pageSize: pageSize,
					});
					this.$refs.paging.complete(res.records);
				}
			},
			async queryBlogTopicListData(type) { //查询话题
				if (type == 1) {
					let param = {
						categoryId: this.categoryid
					}
					let res = await blogApi.queryBlogTopicList(param);
					const records = res.records;
					// 遍历records数组
					records.forEach(record => {
						// 访问每个对象的name属性
						if (this.Tags.length < 5) {
							this.Tags.push(record.name)

						}
					});
				} else {
					let res = await blogApi.queryBlogTopicList();
					const records = res.records;
					// 遍历records数组
					records.forEach(record => {
						// 访问每个对象的name属性
						if (this.Tags.length < 5) {
							this.Tags.push(record.name)

						}
					});
				}

			},
			async queryTopicID(name) {

				let param = {
					name: name
				}


				let res = await blogApi.queryBlogTopicList(param);
				const records = res;
				this.topicId = res.records[0].id;


			},
			async toTags(name) { // 博客话题页
				await this.queryTopicID(name); // 等待 queryTopicID 方法完成

				if (this.topicId) {
					uni.navigateTo({
						url: `/pagesApp/topic/topic?topicName=${name}&topicId=${this.topicId}` // 使用 this.topicId
					});
				} else {
					console.error('未找到匹配的 topicId');
				}
			},

			// 上热门
			gotoPromotion(i) {
				const jsonString = JSON.stringify(i);
				uni.navigateTo({
					url: `/pagesApp/Promotion/Promotion?data=${encodeURIComponent(jsonString)}`
				});
			},
			openMorePopup(i) {
				this.morePopupData = i
				uni.hideTabBar()
				this.$refs.morePopup.open('bottom')
			},
			async queryBlogRecommendListData() { //查询推荐的博客列表
				this.isLastPage = false;
				try {
					// console.log('开始加载数据，当前页码：', this.params.pageIndex); // 添加日志

					const params = {
						...this.params
					};
					if (this.type !== 0) {
						params.categoryId = this.type;
					}

					const res = await blogApi.queryBlogRecommend(params);
					this.cardLoading = false;
					// console.log('API返回数据：', res); // 添加日志

					const records = Array.isArray(res.records) ? res.records : [];

					if (this.params.pageIndex === 1) {
						this.command = records.map(i => ({
							...i,
							isLongChart: 1
						}));
					} else {
						const newRecords = records.map(i => ({
							...i,
							isLongChart: 1
						}));

						const existingMap = new Map(this.command.map(item => [item.id, item]));
						newRecords.forEach(item => {
							if (!existingMap.has(item.id)) {
								this.command.push(item);
							}
						});
					}

					if (records.length < this.params.pageSize) {
						this.isLastPage = true
					}
					// console.log('数据加载完成，当前数据量：', this.command.length); // 添加日志

				} catch (error) {
					console.error('加载数据失败：', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				}
			},
			// 关注的博客
			async queryBlogConcernListData() {

				let res = await blogApi.queryBlogConcernList(this.concernBlogparam);
				const records = res.records;
				this.cardLoading = false;
				if (records.length === 0) {
					// 如果为空，设置isLastPage为true
					this.concernisLastPage = true;
					return;
				} else if (records.length < this.concernBlogparam.pageSize) {
					this.concernisLastPage = true;
				}

				records.forEach(i => {
					let isLongChart = {
						isLongChart: 1,
					}
					i = Object.assign(i, isLongChart);

					const gmtCreated = i.gmtCreated;
					const parts = gmtCreated.split(' ');
					const monthDay = parts[0].split('-').slice(1).join('-');
					const formattedDate = monthDay + ' ' + parts[1];
					i.gmtCreated = formattedDate;
				});

				// 根据页码决定是追加还是替换数据
				if (this.concernBlogparam.pageIndex === 1) {
					this.concern = records; // 第一页直接替换
				} else {
					this.concern.push(...records); // 其他页追加
				}
			},
			GoCheckIt() {
				uni.navigateTo({
					url: '/pagesApp/App-introduce/App-introduce'
				})
				setTimeout(() => {
					uni.setStorageSync('firstTips', 'No-Show');
					this.firstTips = false
				}, 300)
			},
			async categoryData() { //分类页
				let res = await blogApi.category();
				const start = this.category.length;
				this.category.splice(start, 0, ...res.records);
				// console.log(this.category);
			},
			async dianzan(id, type) { //点赞
				if (type === 2) {
					const param = {
						blogId: id,
						flag: true,
						type: 1
					};
					this.command.forEach(i => {
						if (i.id == id) {
							i.favorFlag = !i.favorFlag;
							if (i.favorFlag) {
								i.favorCount = i.favorCount + 1;
								let res = blogApi.dianzanBlog(param);
								this.getTaskList(20);
							} else {
								i.favorCount = i.favorCount - 1;
								param.flag = false;
								let res = blogApi.dianzanBlog(param);
							}
						}

					})
				} else {
					const param = {
						blogId: id,
						flag: true,
						type: 1
					};
					this.command.forEach(i => {
						if (i.id == id) {
							i.favorFlag = !i.favorFlag;
							if (i.favorFlag) {
								i.favorCount = i.favorCount + 1;
								let res = blogApi.dianzanBlog(param);
								this.getTaskList(20);
							} else {
								i.favorCount = i.favorCount - 1;
								param.flag = false;
								let res = blogApi.dianzanBlog(param);
							}
						}
					})
				}
			},
			// 不喜欢
			disLike(i) {
				console.log(this.morePopupData);
				uni.showToast({
					title: '此功能暂未开发!',
					icon: 'none',
					duration: 1500
				})
				this.$refs.morePopup.close()
				setTimeout(() => {
					uni.showTabBar()
				}, 250)
			},
			// 收藏
			async collect() {
				let params = {
					type: 2,
					flag: this.morePopupData.collectFlag ? false : true,
					blogId: this.morePopupData.id
				}
				this.morePopupData.collectFlag = this.morePopupData.collectFlag ? false : true
				let res = await blogApi.LikeAndComment(params)
				this.$refs.morePopup.close()
				setTimeout(() => {
					uni.showTabBar()
				}, 250)
			},
			async shoucang(id, type) { //收藏
				if (type === 2) {
					this.shoucangparam.blogId = id;
					this.command.forEach(i => {
						if (i.id == id) {
							i.collectFlag = !i.collectFlag;
							if (i.collectFlag) {
								let res = blogApi.dianzanBlog(this.shoucangparam);
							} else {
								this.shoucangparam.flag = false;
								let res = blogApi.dianzanBlog(this.shoucangparam);
							}
						}
					})
				} else {
					this.shoucangparam.blogId = id;
					this.concern.forEach(i => {
						if (i.id == id) {
							i.collectFlag = !i.collectFlag;
							if (i.collectFlag) {
								let res = blogApi.dianzanBlog(this.shoucangparam);
							} else {
								this.shoucangparam.flag = false;
								let res = blogApi.dianzanBlog(this.shoucangparam);
							}
						}
					})
				}
			},
			async liulan(id, item) { //浏览
				console.log('进入浏览:', id, item);
				const param = {
					blogId: id,
					flag: true,
					type: 3
				};
				let res = await blogApi.dianzanBlog(param);
				let data = JSON.stringify(item);
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data=' + data
				})
			},
			// 关注
			async concernData(uid) {
				this.concernParam.toUid = uid;
				this.concernParam.fromUid = this.$store.state.user.uid;
				if (this.concernParam.toUid == this.concernParam.fromUid) {
					return
				}
				let res = await userApi.relation(this.concernParam);
				this.addFriend(uid);
				this.getTaskList(19);
				this.command.forEach(i => {
					if (i.uid == uid) {
						i.concernFlag = true
					}
				})
			},
			// 添加朋友
			addFriend(uid) {
				let that = this
				that.$tim.addFriend({
					to: uid,
					source: 'AddSource_Type_App',
					type: 'Add_Type_Both',
				}).then((imResponse) => {
					const {
						code
					} = imResponse.data;
					if (code === 30539) {} else if (code === 0) {
						console.log('添加好友成功！')
					}
				}).catch((imError) => {
					console.warn('addFriend error:', imError);
				});
			},
			gotoDetail(item) { // 跳转到详情页
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data=' + data
				})
			},
			user(uid) { //点击头像进入个人页
				if (uid == this.$store.state.user.uid) {
					uni.switchTab({
						url: `/pages/user/user`
					});
				} else {
					uni.navigateTo({
						url: `/pagesMain/HomePage/HomePage?id=${uid}`
					});
				}
			},
			//关注用户
			concernUser(uid) {
				if (this.checkRealNaem()) {
					let i = this.concernData(uid);
					this.uid.push(uid);
				} else {
					console.log("没有实名认证");
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							} else if (res.cancel) {

								// console.log('用户点击取消');
								// 不执行任何操作，用户取消退出
							}
						}
					});
				}
			},
			checkRealNaem() { //判断是否实名
				// if (this.$store.state.user.realName == '' || this.$store.state.user.realName == null) {
				// 	return false
				// } else {
				// 	return true
				// }
				return true
			},
			toim(i) { //跳转到聊天页面
				if (this.checkRealNaem()) {
					const item = {
						id: i.uid,
						name: i.nickName,
						avatar: i.avatar,
						conversationID: 'C2C' + i.uid,
						type: 'C2C'
					}
					uni.navigateTo({
						url: '/message/im/im?to=' + encodeURIComponent(JSON.stringify(item))
					});
				} else {
					console.log("没有实名认证");
					uni.showModal({

						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							} else if (res.cancel) {

								// console.log('用户点击取消');
								// 不执行任何操作，用户取消退出
							}
						}
					});
				}

			},
			gotoMesNoticePage() {
				uni.navigateTo({
					url: '/pagesApp/MesNotice/MesNotice'
				})
			},
			chang(type) { // 切换分类
				this.cardLoading = true;
				// 如果点击当前已选中的类型，不做处理
				if (this.type === type) {
					return;
				}
				if (type == 0) {
					this.type = type;
					this.params = {
						pageIndex: 1,
						pageSize: 3,
						isLastPage: false
					};
					// 清空数据数组
					this.command = [];
					this.Tags = [];
					// 重新加载数据
					uni.showLoading({
						title: '加载中...'
					});
					setTimeout(() => {

						this.queryBlogTopicListData(0);
						this.queryBlogRecommendListData();
						uni.hideLoading();
					}, 500)

					return
				}
				this.type = type;
				this.categoryid = type;

				console.log(this.type);

				// 重置分页参数
				this.params = {
					pageIndex: 1,
					pageSize: 3,
					isLastPage: false
				};

				// 清空数据数组
				this.command = [];
				this.Tags = [];
				// 重新加载数据
				uni.showLoading({
					title: '加载中...'
				});
				setTimeout(() => {
					this.queryBlogTopicListData(1);
					this.queryBlogRecommendListData();
					uni.hideLoading();
				}, 500)

			},
			share(item) {
				this.shareData.summary = item.remark
				this.shareData.imageUrl = item.screenshot1

				uni.hideTabBar()
				this.$refs.share.open()
				this.display = 'none'
			},
			changestatus(e) {
				if (!e.show) {
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
			},
			changedisplay() {
				this.display = "flex"
			},
			ImgSize(event, id) {

				if (this.ctype == 1) {
					if (event.target.width > event.target.height) { // 横图
						this.command[id].isLongChart = 0
					}
				}
				if (this.ctype == 0) {
					if (event.target.width > event.target.height) { // 横图
						this.concern[id].isLongChart = 0
					}
				}

			},
			// 分享
			OnShare(type) {
				let that = this
				if (type === 1 || type === 2) {
					uni.share({
						provider: "weixin",
						scene: type === 1 ? 'WXSceneSession' : 'WXSceneTimeline',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function(res) {
							that.getTaskList(21);
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							console.log(failData);
							if(failData.code == -8) {
								uni.showToast({
									title: '客户端未安装',
									icon: 'none',
									duration: 1500
								})
							} else if(failData.code == -100) {
								console.log('客户端安装了，但是没有登录，用户返回后的状态');
							} else {
								uni.showToast({
									title: failData,
									icon: 'none',
									duration: 1500
								})
							}
						}
					});
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
				if (type === 3 || type === 4) {
					uni.share({
						provider: "qq",
						scene: type === 3 ? 'WPA' : 'QZONE',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function(res) {
							that.getTaskList(21);
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							if(failData.code == -2) {
								return
							}
							uni.showToast({
								title: failData,
								icon: 'none',
								duration: 1500
							})
						}
					});
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
				if (type === 5) {
					uni.showToast({
						title: '此功能暂未开发！',
						icon: 'none',
					})
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
			},
			async getTaskList(taskid) {
				let params = {
					id: taskid
				}
				let res = await TaskApi.getTaskList(params)
				if(res.records[0].finishFlag) return
				if(!res.records[0].receiveFlag) {
					this.receiveTask(taskid).then(() => {
						this.finishTask(taskid);
					})
				} else {
					this.finishTask(taskid);
				}
			},
			async receiveTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.ReceiveTask(params)
				console.log('领取完成！');
			},
			async finishTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.FinishTask(params);
				console.log('任务完成！');
			},
			// 图片预览
			previwImage(id, index) {
				if (this.ctype == 1) {
					if (this.command[id].screenshot1) {
						this.imgs.push(this.command[id].screenshot1)
					}
					if (this.command[id].screenshot2) {
						this.imgs.push(this.command[id].screenshot2)
					}
					if (this.command[id].screenshot3) {
						this.imgs.push(this.command[id].screenshot3)
					}
					uni.previewImage({
						current: index, // 当前显示图片索引
						urls: this.imgs, // 需要预览的图片http链接列表
					});
					this.imgs = []
				}
				if (this.ctype == 0) {
					if (this.concern[id].screenshot1) {
						this.imgs.push(this.concern[id].screenshot1)
					}
					if (this.concern[id].screenshot2) {
						this.imgs.push(this.concern[id].screenshot2)
					}
					if (this.concern[id].screenshot3) {
						this.imgs.push(this.concern[id].screenshot3)
					}
					uni.previewImage({
						current: index, // 当前显示图片索引
						urls: this.imgs, // 需要预览的图片http链接列表
					});
					this.imgs = []
				}
			},

			changType(type) {
				this.cardLoading = true;
				this.ctype = type
				this.$refs.paging.reload();
			},
			toPostUpdates() {
				uni.navigateTo({
					url: "/pagesMain/world-PostUpdates/world-PostUpdates"
				})
			},

			gotoReportPage() {
				this.$refs.morePopup.close()
				setTimeout(() => {
					uni.showTabBar()
					uni.navigateTo({
						url: "/pagesMain/ReportPage/ReportPage?type=3&idRef=" + this.morePopupData.id +
							'&uid=' + this.morePopupData.uid
					})
				}, 250)
			}
		},
		mounted() {
			// 移除重复的数据加载调用
			this.queryBlogTopicListData(0);
			// this.queryBlogRecommendListData(); // 移除这里的调用，因为 onLoad 中已经调用了
			this.categoryData();
		},
	}
</script>

<style scoped>
	.avatar-frame {
		position: absolute;

		width: 120rpx;
		/* 比头像大 20rpx */
		height: 120rpx;
		/* 比头像大 20rpx */
		z-index: 2;
		/* 调整层级 */
		pointer-events: none;
	}

	.scroll-wrapper {

		white-space: nowrap;
	}

	.navbar-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.navbar-container {
		display: flex;
		padding: 5rpx;
	}

	.tab-item {
		display: inline-block;
		padding: 0 5rpx;
		margin-right: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		flex-shrink: 0;
		/* 防止被压缩 */
	}

	.active-tab {
		background: #18c3ff;
		border-radius: 30rpx;
		padding: 0 22rpx;
	}

	.colorfff {
		color: #ffffff;
	}

	.color71 {
		color: #717171;
	}

	.font-bold {
		font-weight: bold;
	}

	.navbar-container {
		min-width: 200px;
		display: flex;
		align-items: center;
	}

	.navbar-scroll {
		display: flex;
		width: 100%;
		overflow-x: auto;
		/* 允许横向滚动 */
		white-space: nowrap;
		/* 保持项目在一行显示 */
	}

	.MorePic {
		width: 200rpx;
		height: 200rpx;
	}

	.focus-txt {
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.liner {
		border-radius: 30rpx;
		height: 8rpx;
		width: 56rpx;
		background-color: transparent;
	}

	.lon {
		background-color: #f064cf;
	}

	.threePic {
		width: 200rpx;
		height: 180rpx;
	}

	.bg-grey {
		background-color: #f3f2f2;
		/* 灰色背景 */
	}

	.img-bg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 120rpx;
		background-image: linear-gradient(to top, #fab452, #9d41d3);
	}

	.px11 {

		padding-left: 20rpx;
		padding-right: 5rpx;

	}

	.img-bg-img {
		height: 85rpx;
		width: 85rpx;
		border-radius: 100rpx;
		border: solid 5rpx #fff;
	}

	.huati {
		background: linear-gradient(90deg, #5DB0FE 0%, rgba(93, 176, 254, 0.8) 1%, #E8BAFC 100%);
	}

	.quanzi {
		background: linear-gradient(90deg, #D951C6 1%, #FB9AB0 100%);
	}

	.huodong {
		background: linear-gradient(90deg, #5DB0FE 1%, #86F5C9 100%);
	}

	.aixin {
		background: #FFA5DF;
		width: 110rpx;
	}

	.camera {
		width: 110rpx;
		height: 110rpx;
		line-height: 100px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(147deg, #ec65ce 31%, #fb5984 50%, #feb356 100%);
		text-align: center;
		border: none;
		position: fixed;
		bottom: 2%;
		left: 83%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}

	/* 修改图片样式 */
	.threePic {
		width: 200rpx;
		height: 180rpx;
	}

	.MorePic {
		width: 200rpx;
		height: 200rpx;
	}

	.color-grey {
		color: #CCCCCC;
		/* 灰色 */
	}

	/* 添加单图样式 */
	.singlePic {
		width: 550rpx !important;
		/* 固定宽度 */
		height: 382rpx !important;
		/* 固定高度 */
		border-radius: 15rpx;
	}

	.topic-list {
		margin-bottom: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.topic-content {
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		background: #F0F7FF;
		height: 60rpx;
		line-height: 60rpx;
	}

	.topic-hash {
		color: #18c3ff;
		font-size: 28rpx;
		margin-right: 2rpx;
		font-weight: bold;
	}

	.topic-name {
		font-size: 28rpx;
		color: #999899;
	}
</style>